<template>
  <div id='line'>
    <div class="aysBox1">
      <div class="wordBox">
        <Category :xData="fansXdata"
                  :y1Data="fansY1data"
                  :y2Data="fansY2data"
                  name1="增量"
                  name2="总量"
                  formatter="1"
                  v-if="finishFans" />
        <!-- <div v-loading="!finishFans"
             v-if="!finishFans"
             class="loading"
             element-loading-text="拼命加载中..."
             element-loading-spinner="el-icon-loading"></div> -->
      </div>
    </div>
  </div>
</template>
<script>
import Category from '../Category'
import timeup from '../timeup'
export default {
//   name: 'line',
  components: { Category,timeup },
  data() {
    return {
      // 粉丝趋势
      finishFans: false,
      fansXdata: [],
      fansY1data: [],
      fansY2data: [],
    }
  },
  watch: {
    // 粉丝趋势时间
    fansTime: function (newVal, oldVal) {
      this.finishFans = false
      this.GetFansData()
    },
  },
  created() {
    this.GetFansData()
  },

  methods: {
    // 粉丝趋势
    GetFansData() {
      let that = this
      let timeType = 1
      if (that.fansTime == '近7天') {
        timeType = 1
      } else if (that.fansTime == '30天') {
        timeType = 2
      } else if (that.fansTime == '90天') {
        timeType = 3
      }
      that.$axios
        .get(
          '/api/author/GetAuthorTrend',
          {
            params: {
              timeType: timeType,
              authorId: that.$route.params.id,
              trendType: 1,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel2 != null) {
                that.cancel2()
              }
              that.cancel2 = c
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            that.fansXdata = [] //切换时间时清空之前的
            let Xdata = res.data.data.dates
            that.fansY1data = res.data.data.datas1 //增量
            that.fansY2data = res.data.data.datas2 //总量
            Xdata.forEach((element) => {
              that.fansXdata.push(that.timestamp(element, 'M/D'))
              return that.fansXdata
            })
            that.finishFans = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>
<style scoped lang='less'>
#line {
  width: 100%;
  .chartTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 44px;
    .titleBox {
      img {
        margin-left: 0;
      }
    }
  }
//
  .wordBox {
    width: 8.933rem;
    margin: 0 auto;
    height: 256px;
  }
}
</style>